<template>
  <div class="contents">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="现有库存" name="first">
        <el-row :gutter="10" type="flex" align="middle">
          <el-col :span="3">
            <el-select placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-col>
          <el-col :span="3">
            <el-select placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-col>
          <el-col :span="3">
            <el-cascader :options="options"></el-cascader>
          </el-col>
          <el-col :span="4">
            <el-input placeholder="按商品名/编码搜索">
              <el-button slot="append" icon="el-icon-search"></el-button>
            </el-input>
          </el-col>
          <el-col :span="11">
            <el-checkbox>隐藏0库存商品</el-checkbox>
            <el-checkbox>高于库存上限</el-checkbox>
            <el-checkbox>低于库存下限</el-checkbox>
          </el-col>
        </el-row>
        <div class="btn-fixed">
          <el-button>表头设置</el-button>
          <el-button>导入</el-button>
          <el-button>导出</el-button>
        </div>
        <el-tabs value="first" type="card" class="dataLabel">
          <el-tab-pane label="基础商品" name="first">
            <el-table :data="table1" border style="width: 100%;">
              <el-table-column label="商品名称"></el-table-column>
              <el-table-column label="描述"></el-table-column>
              <el-table-column label="单位"></el-table-column>
              <el-table-column label="仓库"></el-table-column>
              <el-table-column label="库位"></el-table-column>
              <el-table-column label="一级分类"></el-table-column>
              <el-table-column label="二级分类"></el-table-column>
              <el-table-column label="在途库存"></el-table-column>
              <el-table-column label="现有库存"></el-table-column>
              <el-table-column label="库存均价"></el-table-column>
              <el-table-column
                label="库存总金额"
                width="120px"
              ></el-table-column>
              <el-table-column label="库存上限"></el-table-column>
              <el-table-column label="库存下限"></el-table-column>
            </el-table>
            <el-pagination
              background
              layout="total, prev, pager, next,sizes, jumper"
              :page-size="10"
              :page-sizes="[10, 20, 30, 40]"
              style="text-align: left;"
              :total="0"
            />
          </el-tab-pane>
        </el-tabs>
      </el-tab-pane>
      <el-tab-pane label="成本调整" name="second">
        <el-row :gutter="10">
          <el-col :span="3">
            <el-select placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-col>
          <el-col :span="5">
            <el-date-picker
              type="daterange"
              range-separator="-"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              style="width: 200px;"
            ></el-date-picker>
          </el-col>
          <el-col :span="5">
            <el-input placeholder="输入单号/制单人">
              <el-button slot="append" icon="el-icon-search"></el-button>
            </el-input>
          </el-col>
        </el-row>
        <div class="btn-fixed">
          <el-button type="primary" icon="el-icon-plus">新增</el-button>
        </div>
        <el-table :data="table2" style="width: 100%; margin-top: 10px;">
          <el-table-column label="单号"></el-table-column>
          <el-table-column label="调整日期"></el-table-column>
          <el-table-column label="商品种数"></el-table-column>
          <el-table-column label="仓库"></el-table-column>
          <el-table-column label="制单人"></el-table-column>
          <el-table-column label="状态"></el-table-column>
        </el-table>
        <el-pagination
          background
          layout="total, prev, pager, next,sizes, jumper"
          :page-size="10"
          :page-sizes="[10, 20, 30, 40]"
          style="text-align: left;"
          :total="0"
        />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        activeName: 'first',
        options: [
          {
            value: '选项1',
            label: '黄金糕',
          },
          {
            value: '选项2',
            label: '双皮奶',
          },
          {
            value: '选项3',
            label: '蚵仔煎',
          },
        ],
        table1: [],
        table2: [],
      }
    },
    methods: {
      handleClick(tab, event) {
        console.log(tab, event)
      },
    },
  }
</script>

<style lang="scss" scoped>
  .contents {
    padding: 0 20px 10px;

    .btn-fixed {
      position: fixed;
      top: 133px;
      right: 50px;
      z-index: 12;
    }
  }
</style>
<style lang="scss">
  .dataLabel {
    margin-top: 10px;
    .el-tabs__header {
      margin: 0;
    }
  }
</style>
